<script setup>
import {ref, watch} from "vue";
import {useRoute} from "vue-router";

const route = useRoute();
const activeIndex = ref('/text-highlighter');

watch(route, (to) => {
  const validPaths = ['/text-highlighter', '/similarity-img-search', '/shortcut-manager'];
  const currentPath = to.path || '/text-highlighter'; // 提供默认值

  if (validPaths.includes(currentPath)) {
    activeIndex.value = currentPath;
  } else {
    // 如果路径不匹配，保持默认值或设置为第一个有效路径
    activeIndex.value = '/text-highlighter';
  }
}, {immediate: true});

const handleSelect = (index) => {
  activeIndex.value = index;
};
</script>

<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      router
      @select="handleSelect"
  >
    <el-menu-item index="/text-highlighter">高亮词</el-menu-item>
    <el-menu-item index="/similarity-img-search">图片处理</el-menu-item>
    <el-menu-item index="/shortcut-manager">设置</el-menu-item>
  </el-menu>
</template>

<style scoped>

</style>